 {% extends 'web_base.html' %}
{% load staticfiles %}
{% block title %}
首页
{% endblock %}


  {% block web_body %}
        <div class="wrapper">
            <div class="sort hidden-sm hidden-xs">
                <!-- <div class="container"> -->
                <table>
                    <th>全部分类</th>
                    <tr>
                        <td><a href="">游戏笔记本</a></td>
                    </tr>
                    <tr>
                        <td><a href="">台式笔记本</a></td>
                    </tr>
                    <tr>
                        <td><a href="">办公键盘</a></td>
                    </tr>
                    <tr>
                        <td><a href="">游戏鼠标键/耳机</a></td>
                    </tr>
                    <tr>
                        <td><a href="">高清摄像头</a></td>
                    </tr>
                    <tr>
                        <td><a href="">VR专区</a></td>
                    </tr>
                    <tr>
                        <td><a href="">驱动下载</a></td>
                    </tr>
                    <tr>
                        <td><a href="">保修政策</a></td>
                    </tr>
                </table>
                <!-- </div> -->
            </div>
            <!-- 轮播 -->
            {% for foo in slider %}
             <a href="http:www.baidu.com" class="slider"
               style="background: url({{ foo.image.url }}) no-repeat center; background-size: cover;"></a>
            {% endfor %}


        </div>
        <div class="promote">
            <div class="container">
                <div class="row">
                    {% for pro in promote %}
                   <div class="col-lg-3 col-sm-3">
                        <div class="thumbnail">
                            <a href="{{ pro.url }}"> <img src="{{ pro.image.url }}"></a>
                        </div>
                    </div>

                    {% endfor %}


                </div>
            </div>
        </div>
        <!-- 促销 -->

        <!-- 精选单品推荐 -->
        <div class="recommend">
            <div class="container">
                <h3>精选单品推荐</h3>
                <div class="row">
                    {% for rec in recommend %}
                     <div class="col-sm-2 col-lg-2">
                        <div class="thumbnail">
                            <a href=""><img src="{{ rec.image.url }}" alt=""></a>
                            <h5>{{ rec.name }}</h5>
                            <p>{{ rec.desc }}</p>
                        </div>

                    </div>

                    {% endfor %}


                </div>
            </div>
        </div>
        <!-- /精选单品推荐 -->

        <!-- goods_body -->
        <div class="goods_body">
        <div class="laptop">
            <div class="frame">
                <div class="container">
                    <div class="title">
                        <h4>笔记本/游戏本</h4>
                        <div class="more"><a href="">MORE+</a></div>
                    </div>
                </div>
                <div class="container">
                    <div class="row">

                        <div class="col-lg-4 col-md-4">
                            <div class="thumbnail">
                                <img src="{% static '/media/lapBanner.jpg' %}" alt="">
                            </div>
                        </div>
                        <div class="col-lg-8 col-md-8">
                            <div class="row">
                                {% for foo in laptop %}
                                <div class="col-lg-4 col-md-4">
                                    <div class="thumbnail">
                                        <img src="{{ foo.image.url }}" alt="">
                                        <h5>{{ foo.name }}</h5>
                                        <p>{{ foo.desc }}</p>
                                        <span>¥{{ foo.price }}</span>
                                    </div>
                                </div>
                                {% endfor %}



                            </div>

                        </div>

                    </div>
                </div>
            </div>
        </div>
        <div class="desktop">
            <div class="frame">
                <div class="container">
                    <div class="title">
                        <h4>台式机/一体机</h4>
                        <div class="more"><a href="">MORE+</a></div>
                    </div>
                </div>
                <div class="container">
                    <div class="row">

                        <div class="col-lg-4 col-md-4">
                            <div class="thumbnail">
                                <img src={% static "/media/desk.jpg" %} alt="">
                            </div>
                        </div>
                        <div class="col-lg-8 col-md-8">
                            <div class="row">
                                {% for desk in desktop %}
                                 <div class="col-lg-4 col-md-4">
                                    <div class="thumbnail">
                                        <img src="{{ desk.image.url }}" alt="">
                                        <h5>{{ desk.name }}</h5>
                                        <p>{{ desk.desc }}</p>
                                        <span>¥{{ desk.price }}</span>
                                    </div>
                                </div>
                                {% endfor %}



                            </div>

                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="device">
            <div class="frame">
                <div class="container">
                    <div class="title">
                        <h4>外设系列</h4>
                        <div class="more"><a href="">MORE+</a></div>
                    </div>
                </div>
                <div class="container">
                    <div class="row">

                        <div class="col-lg-4 col-md-4">
                            <div class="thumbnail">
                                <img src={% static "/media/device.jpg" %} alt="">
                            </div>
                        </div>
                        <div class="col-lg-8 col-md-8">
                            <div class="row">
                                {% for part in parts %}
                                   <div class="col-lg-4 col-md-4">
                                    <div class="thumbnail">
                                        <img src={{ part.image.url }} alt="">
                                        <h5>{{ part.name }}</h5>
                                        <p>{{ part.desc }}</p>
                                        <span>¥{{ part.price }}</span>
                                    </div>
                                </div>

                                {% endfor %}

                            </div>

                        </div>

                    </div>
                </div>
            </div>
        </div>
        <div class="hot">
            <div class="frame">
                <div class="container">
                    <div class="title">
                        <h4>热评产品</h4>
                        <div class="more"><a href="">MORE+</a></div>
                    </div>
                </div>
                <div class="container">

                    <div class="row">
                        {% for lap in laptop %}
                             <div class="col-lg-2 col-sm-2">
                            <div class="thumbnail">
                                <img src="{{ lap.image.url }}" alt="">
                                <h5>{{ lap.name }}</h5>
                                <p>{{ lap.desc }}</p>
                                <span>{{ lap.price }}</span>
                            </div>
                        </div>

                        {% endfor %}


                    </div>

                </div>
            </div>
        </div>

    {% endblock %}


